<template>
  <div id="container">
    <header>
      <h1>WOW.js</h1>
    </header>
    <div id="main">
      <section class="wow fadeInDown" style="background-color: #f1c40f"></section>
      <section
        class="wow pulse"
        style="background-color: #e74c3c"
        data-wow-iteration="infinite"
        data-wow-duration="1500ms"
      ></section>
      <section class="section--purple wow slideInRight" data-wow-delay="2s"></section>
      <section class="section--blue wow bounceInLeft" data-wow-offset="300"></section>
      <section class="section--green wow slideInLeft" data-wow-duration="4s"></section>
      <button id="moar" @click="handlerMoar">LOAD MOAR!!</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
new WOW().init();
function handlerMoar() {
  let section = document.createElement("section");
  section.className = "wow fadeInDown";
  section.style.backgroundColor = "#f1c40f";

  // 语法 ：父元素.insertBefore(参数1，参数2)
  // 参数1 ： 需要插入元素
  // 参数2 ： 插入到哪个元素前面 */
  document.querySelector("#main").insertBefore(section, document.querySelector("#moar"));
}
</script>
<style>
@import "/css/animate.css";
@import "/css/mycss.css";
</style>
<style scoped></style>
